Quartoでウェブサイトをつくってみた

自己紹介

• 氏名: 伊東宏樹
• 勤務先: 森林総合研究所北海道支所
• 共訳書:
  • BUGSで学ぶ階層モデリング入門—個体群のベイズ解析—
  • 生態学のための階層モデリング—RとBUGSによる分布・個体数量・種の豊かさの統計解析—

Quartoとは

• An open-source scientific and technical publishing system

• Quarto is a multi-language, next generation version of R Markdown from Posit

  • Rのほか、Python、Julia、Observableに対応

• RStudio以外でも使える（例: Emacs）

インストール

RStudioから使う

ウェブサイトの作成

メニューから File > New Project…

設定

サイトの設定

_quarto.yaml

project:
  type: website
  
website:
  title: "テストサイト"
  navbar: left:
    - href: index.qmd
      text: Home
    - about.qmd
    
format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    
editor: visual

詳細は公式ドキュメント

• Website Navigation

• Website Tools

ページごとの設定

• YAMLヘッダで設定

• lang: jaとすると、パーツを日本語化できる¹。

---
title: "テストサイト"
lang: ja
---

トップページの作成

index.qmd

---
title: "ホーム"
lang: ja
---

これは Quarto ウェブサイトです。

Quarto ウェブサイトについては <https://quarto.org/docs/websites> をご覧ください。

![シマエナガ](images/P3054939.jpeg)

Render

レンダリング結果

Rコードの追加

R Markdown同様にRコードを挿入・実行できる。

Quarto独自の機能として、‘#|’ の後にチャンクオプションを書ける。

```{r}
#| label: plot
#| fig-width: 6
#| fig-height: 3
library(ggplot2)
ggplot(data = iris) +
  geom_point(mapping = aes(x = Sepal.Length, y = Sepal.Width,
                           colour = Species))
```

Blogの追加

参考: Adding a blog to your existing Quarto website

• Blog記事を格納するディレクトリposts/を追加する。

• 設定ファイルposts/_metadata.ymlを追加する（任意）。ここではfreeze: trueを設定。

# options apply to all posts in this folder

# freeze computational output
freeze: true

リスティングページposts.qmdを追加する。

---
title: "Blog"
lang: ja
listing:
  contents: posts    # 記事格納ディレクトリ
  sort: "date desc"  # 順番
  type: default      # リスティングスタイル
  categories: true   # カテゴリーの使用
---

_quarto.yml のwebsiteの項目にposts.qmdを追加

website:
  title: "テストサイト"
  navbar: left:
    - href: index.qmd
      text: Home
    - about.qmd
    - posts.qmd

Blog記事の追加

postsの下にディレクトリ作成、その下にindex.qmdというファイル名でQuartoドキュメント作成。

---
title: "テスト"
lang: ja
date: "2024-02-17"
categories: [Test, R]
---

テストです。

```{r}
#| label: plot
library(ggplot2)
ggplot(data = iris) +
  geom_point(aes(x = Sepal.Length, y = Sepal.Width,
                 colour = Species))
```

ディレクトリ構造（例）

_quarto.yml
_site/             <- レンダリングされたページは_site以下に生成
   ...
about.qmd
images/
   ...
index.qmd
posts/
   _metadata.yml
   2024-02-17-test/
      index.qmd
   2024-02-18-test2/
      index.qmd
   ...
posts.qmd
styles.css

Render

リスティングページ

Blog記事

RSS Feed

_quarto.ymlのwebsiteにsite-urlとdescriptionを追加する。

website:
  title: "テストサイト"
  site-url: https://example.com  # ←追加
  description: "test blog"       # ←追加

Blogリスティングページ（この例ではposts.qmd）のlistingにfeed: trueを追加する。

listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed: true       # ←追加

実際に作成したウェブサイト

https://ito4303.sakura.ne.jp

おわりに

詳細な設定などは、公式ドキュメント(Creating a Website)などを参照してください。